<template>
  <div>
    <common-header :showinput="true" :showback="false"></common-header>
    <div class="page-content page-bottom">
      <home-banner :list="bannerList"></home-banner>
      <home-nav :list="navList"></home-nav>
      <home-transverse :list="transverseList"></home-transverse>
      <home-recommend :list="recommendList"></home-recommend>
    </div>
  </div>
</template>

<script>
import commonHeader from 'common/common-header'
import homeBanner from './components/banner'
import homeNav from './components/nav'
import homeRecommend from './components/recommend'
import homeTransverse from './components/transverse'
import * as homeApi from 'api/home-api'
import { ERR_SUCCESS } from 'config/index'
export default {
  name: 'Home',
  components: {
    commonHeader,
    homeBanner,
    homeNav,
    homeRecommend,
    homeTransverse
  },
  data () {
    return {
      bannerList: [],
      navList: [],
      recommendList: [],
      transverseList: []
    }
  },
  mounted () {
    this.getHomeInfo()
  },
  methods: {
    getHomeInfo() {
      homeApi.indexapi({}).then((res) => {
        let {data} = res
        if (data.errno === ERR_SUCCESS) {
          this.bannerList = data.banners
          this.navList = data.icons
          this.recommendList = data.recommend3
          this.transverseList.push({
            image: data.text1[0],
            ad: data.ad3[0],
            recommend: data.recommend1
          })
          this.transverseList.push({
            image: data.text2[0],
            ad: data.ad4[0],
            recommend: data.recommend2
          })
        } else {

        }
      }).catch(() => {

      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

</style>
